<template>
  <div class="grid">
    <div class="grid-header">
      <div class="grid-header-scroller">
        <table border="0" cellpadding="0" cellspacing="0">
          <thead>
            <tr>
              <th class="grid-col-check" v-if="!disableSelect">
                <div class="custom-control custom-checkbox" v-if="!singleSelect">
                  <input type="checkbox" class="custom-control-input" :id="getCheckControlId()" :name="keyName">
                  <label class="custom-control-label" :for="getCheckControlId()"></label>
                </div>
              </th>
              <th :key="col.name" v-for="col in columns" :width="col.width">{{col.text}}</th>
              <th></th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    <div class="grid-body">
      <table border="0" cellpadding="0" cellspacing="0">
        <colgroup>
          <col v-if="!disableSelect">
          <col :key="col.name" v-for="col in columns" :width="col.width">
          <col>
        </colgroup>
        <thead>
          <tr class="grid-hidden-header">
            <th v-if="!disableSelect"></th>
            <th :key="col.name" v-for="col in columns" :width="col.width">{{col.text}}</th>
          </tr>
        </thead>
        <tbody>
          <tr :key="entry.id" v-for="entry in items">
            <td class="grid-cell-check" v-if="!disableSelect">
              <div class="custom-control custom-checkbox" v-if="!singleSelect">
                <input type="checkbox" class="custom-control-input" :id="getCheckControlId(entry)" :name="keyName">
                <label class="custom-control-label" :for="getCheckControlId(entry)"></label>
              </div>
              <div class="custom-control custom-radio" v-else>
                <input type="radio" class="custom-control-input" :id="getCheckControlId(entry)" :name="keyName" v-on:change="onCheckChanged(entry)">
                <label class="custom-control-label" :for="getCheckControlId(entry)"></label>
              </div>
            </td>
            <td :key="col.name" v-for="col in columns" class="cell-content">
              <a
                v-if="col.cellClick"
                href="javascript:;"
                v-on:click="onItemClick(col, entry)"
              >{{entry[col.name]}}</a>
              <span v-else>{{entry[col.name]}}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="grid-footer">
      <div v-if="pageable" class="footer-content">
        <div class="status">记录: {{pageable.totalCount}}</div>
        <div class="pager" v-if="pageable">
          <pagination :pageable="pageable"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination"
export default {
  name: "Grid",
  components: { Pagination },
  props: {
    keyName: String,
    columns: Array,
    items: Array,
    pageable: Object,
    singleSelect: false,
    disableSelect: false,
    selectedItems : Array
  },
  methods: {
    onCheckChanged(item, $event) {
      var srcElement = event.srcElement;
      var checked = $(srcElement).prop('checked');
      if(this.singleSelect && checked) {
        this.selectedItems.splice(0);

        this.selectedItems.push(item);
      }
    },
    onItemClick(col, item) {
      var callback = col.cellClick;
      if (callback) callback(col.name, item);
      //console.log(item.order_sn);
    },
    goto(page) {
      if (this.pageable.pageRequest) this.pageable.pageRequest(page);
    },
    getCheckControlId(entry) {
      var key = '0';
      if(entry) 
        key = entry[this.keyName];
      return 'chk_' + this.keyName + '_' + key;
    }
  },
  mounted() {
    var resizeColumnWidth = function() {
      var cols = $(".grid-header th");
      var cells = $(".grid-body col");
      for (var i = 0; i < cols.length - 1; i++) {
        var width = $(cols[i]).css("width");
        $(cells[i]).css("width", width);
      }
    };

    resizeColumnWidth();

    $(window).resize(function() {
      resizeColumnWidth();
    });

    $(".grid-body").scroll(function(e) {
      var left = $(this).scrollLeft();
      $(".grid-header-scroller").css({ "margin-left": -left });
    });
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/app.scss';

th,
td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid {
  width: 100%;
  height: inherit;
  position: relative;
  background-color: white;
  box-shadow: 0 0 0 1px rgba(20, 20, 31, 0.05),
    0 1px 3px 0 rgba(20, 20, 31, 0.15);
}

.grid table {
  border-spacing: 2px;
}

.grid-col-check {
  width: 45px;
}

.grid-col-check .custom-control,
.grid-cell-check .custom-control {
  padding-left: 2rem;
}

.grid-header {
  display: block;
  width: 100%;
  overflow-x: hidden;
  border-bottom: solid 1px $borderColor;
}

.grid-header-scroller {
  display: block;
  width: 100%;
  height: 100%;
}

.grid-header table {
  table-layout: fixed;
  width: 100%;
}

.grid-header tr {
  height: 38px;
  vertical-align: middle;
}

.grid-body {
  overflow: auto;
  width: 100%;
  position: absolute;
  top: 39px;
  bottom: 39px;
  left: 0px;
  right: 0px;
  /* flex: 1; */
  // padding-top: 4px;
  // padding-bottom: 4px;
}

.grid-body tbody tr:hover,
.grid-row-selected {
  background-color: #b1d6f0;
}

.grid-hidden-header {
  position: absolute;
  height: 0px;
  left: 0px;
  top: -9000px;
}

.grid-header-scroller th {
  padding: 4px;
}

.grid-body table {
  table-layout: fixed;
  min-width: 480px;
  width: 100%;
  background-color: white;
}

/* .grid-body tbody tr {
  border-bottom: solid 1px silver;
} */

.grid-body tbody td {
  padding: 4px;
}

.footer-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.status {
  flex: 0 120px;
  height: 100%;
  vertical-align: middle;
  padding-left: 15px;
  line-height: 38px;
}

.pager {
  flex: 1;
  height: 100%;
  text-align: right;
  vertical-align: middle;
  padding-right: 15px;
  line-height: 38px;
}

.grid-footer {
  position: absolute;
  height: 38px;
  bottom: 0px;
  width: 100%;
  border-top: 1px solid $borderColor;
}
</style>


